<template>
  <el-cascader
    v-model="value"
    :options="options"
    size="mini"
    :props="props"
  />
</template>

<script>
import { getDepartmentApi } from '@/api/department'
import { transListToTree } from '@/utils'

export default {
  name: 'SelectTree',
  props: {
    msg: String
  },
  data() {
    return {
      options: [],
      props: { label: 'name', value: 'id' }
    }
  },

  computed: {
    value: {
      get() {
        // 接收父组件未被props接受的属性
        return this.$attrs.value
      },
      set(node) {
        const lastId = node.at(-1) // 可以获取数组的最后一项
        // console.log(lastId)
        //   反向把父组件传递过来的v-model进行修改就可以
        this.$emit('input', lastId)
      }
    }
  },
  created() {
    console.log(this.$attrs)
    this.getDets()
  },
  methods: {
    changeDepart(node) {
      // console.log(node)
      const lastId = node.at(-1) // 可以获取数组的最后一项
      // console.log(lastId)
      //   反向把父组件传递过来的v-model进行修改就可以
      this.$emit('input', lastId)
    //   当用户选择了部门的时候会触发的事件
    //   当前选择的部门信息
    },
    async getDets() {
      const detps = await getDepartmentApi()
      // 接口获取到的数据是扁平的数组结构，需要转化树形之后再赋值
      // 问题：最后一级节点无法选中
      // 解决方法：方法内部加了判断 >> 只有当前节点有儿子的时候再给他children属性
      //   转化成树形
      this.options = transListToTree(detps, 0)
    }
  }
}
</script>

<style scoped>

</style>
